<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0 user-scalable=no"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link rel="stylesheet" href="jQueryPlugin/panel/panel.css" />
    <link rel="stylesheet" href="jQueryPlugin/menu/menu.css" />
    <link rel="stylesheet" href="jQueryPlugin/tab/tab.css" />
    <link rel="stylesheet" href="jQueryPlugin/common.css" />
    <script src="lib/js/jquery.js"></script>
    <script src="jQueryPlugin/panel/panel.js"></script>
    <script src="jQueryPlugin/tab/tab.js"></script>
    <script src="jQueryPlugin/menu/menu.js"></script>

    <style>
        html,body,#root{
            width:100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background-color: #eae5e5;
            overflow: hidden;
        }

        .header{
            height: 70px;
            background-image: url("images/top_bg.png");
            color: white;
            font-weight: bold;
            position: relative;
        }

        .minMenu {
            background: white;
            margin-top: 10px;
            height: 40px;
            border-radius: 5px;
            padding: 0 10px;
            vertical-align: middle;
            text-align: center;
        }

        @media screen and (min-width: 960px){
            .minMenu{
                display: none;
            }
            .leftMenu{
                position: absolute;
                top: 70px;
                bottom: 10px;
                left: 0;
                width: 250px;
                background: white;
                overflow-y: auto;
            }
            .center {
                position: absolute;
                top: 70px;
                bottom: 10px;
                left: 260px;
                right: 0;
                background: white;
            }
        }
        @media screen and (max-width: 960px){
            .minMenu{
                display: block;
            }
            .leftMenu{
                display: none;
                position: absolute;
                top: 130px;
                bottom: 10px;
                left: 0;
                width: 250px;
                background: white;
                overflow-y: auto;
            }
            .center {
                position: absolute;
                top: 130px;
                bottom: 10px;
                left: 0;
                right: 0;
                background: white;
            }

            

        }

        

        


        /* -------------------------------------------------------- */
        .logo{
            position: relative;
            left: 1%;
            /* height: 90%; */
            width: 4%;
        }

        .log-title{
            display: inline-block;
            margin-left: 7%;
            font-size: 1.8em;
            line-height: 70px;
            width: 7%;
        }


        .minSysMenu {
            line-height: 40px;
        }
        
    </style>


    <script>
        var DEV = {
            G_PANEL: null,
            G_TAB: null,
            G_MENU: null,
            G_MENU_DATA: []
        };
        $(function(){

            $("#sysMenu").click(function(){
                $(".leftMenu").show();
            });

            DEV.G_PANEL = new $.Panel();

            DEV.G_TAB = new $.Tab($(".center"));
            DEV.G_TAB.add("iframe","map","地图","map/map.html", false);
            // G_TAB.add("html","w99","w99","Hello World 2");
            // G_TAB.add("html","基础地理信息","基础地理信息调研报告","Hello World");
            // G_TAB.add("html","初步勘探","初步勘探","Hello World 2");
            // tab.add("iframe","tabThree","iframe","jQueryPlugin/tab/index.html");

            loadMenu({"USER_LEVEL":1});
            
        });

        
        function loadMenu(uInfo) {

            $.ajax({
                url: "config/menu.xml",
                dataType: 'xml',
                type: 'GET',
                timeout: 2000,
                error: function (xml) {
                    alert("加载config文件出错！");
                },
                success: function (xml) {
                    var valideMenuIDs = "";
                    // 获取权限
                    var ROLE_INFO = {};
                    $(xml).find("role").each(function (j) {
                        ROLE_INFO['r' + $(this).attr("roleID")] = {
                            roleID: $(this).attr("roleID"),
                            roleName: $(this).attr("roleName"),
                            menus: $(this).attr("menus"),
                            city_code: $(this).attr("city_code"),
                            city_name: $(this).attr("city_name")
                        };
                    });
                    valideMenuIDs = ROLE_INFO['r' + uInfo.USER_LEVEL]["menus"];
                    // 例外地市处理 特殊权限控制
                    //if (uInfo.USER_LEVEL == 2 
                    //    && ROLE_INFO['r' + 'special']['city_code'].indexOf(uInfo.CITY_CODE) >= 0) {
                    //    valideMenuIDs = ROLE_INFO['r' + 'special']["menus"];
                    //}

                    // 获取菜单 
                    $($(xml).find("menus")[0]).find("menu").each(function (i) {

                        if (('' + valideMenuIDs).indexOf($(this).attr("menuID")) < 0)
                            return;

                        var menuLevel_1 = {
                            level: 1,
                            id: $(this).attr("id"),
                            name: $(this).attr("title"),
                            title: $(this).attr("title"),
                            event: false,
                            url: "",
                            type: "",
                            children: []
                        };

                        $(this).children().each(function (j) {
                            if (('' + valideMenuIDs).indexOf($(this).attr("menuID")) < 0)
                                return;
                            var menuLevel_2 = {
                                level: 1,
                                id: $(this).attr("id"),
                                name: $(this).attr("title"),
                                title: $(this).attr("title"),
                                event: true,
                                url: $(this).attr("url"),
                                type: $(this).attr("type"),
                            }

                            menuLevel_1.children.push(menuLevel_2);

                        });

                        DEV.G_MENU_DATA.push(menuLevel_1);

                    });

                    // set menu
                    DEV.G_MENU = new $.Menu({
                        element: $(".leftMenu"),
                        data: DEV.G_MENU_DATA,
                        highlight: true,
                        onNav: function(level, parent, data){
                            // p.alert(JSON.stringify(data));
                            // OpenIFrame();
                            if(data.type == 'dialog'){
                                DEV.G_PANEL.open({ type:1, title: data.title, shadow: false, content: data.url });
                            }else{
                                DEV.G_TAB.add("iframe",data.id,data.title,data.url);
                            }
                        }
                    });
                }
            });

        }

        

    </script>

</head>
<body>

    <div id="root">

        <div class="header">
            <img class="logo" src="images/logo.png" />
            <label class="logo-title">后台管理模板</label>
        </div>

        <div class="minMenu">
            <div class="minSysMenu">
                <span>系统菜单</span>
            </div>
        </div>

        <div class="leftMenu"></div>
        <div class="center"></div>
        

    </div>

    <script>

        var handler; var mng; 

        $(function(){
            mng = new $.Panel();
        });

        
        function OpenIFrame(){
            mng.open({
                type: 0,
                title: "JQuery",
                single:true,
                id:"TEST",
                cmds:[
                    function(){alert("11")},
                    function(){alert("22")},
                    function(){alert("33")},
                ],
                shadow: false,
                fixPosition: true,
                content:"jQueryPlugin/page1.html",
                params: {id: "JQuery"}
            });
        }
        

    </script>
</body>
</html>